<template>
    <admin-frame>
        <header class="page-header">
            <div class="flex">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>退款处理</el-breadcrumb-item>
                    <el-breadcrumb-item>退款详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </header>
        <div class="mainframe-content">
            <div class="content-block">
                <div class="refund flex-row">
                    <div class="flex-fill">
                        <div class="refund-info" v-if="refund.refund_id">
                            <h3 v-if="refund.refund_state===1">处理退款申请</h3>
                            <h3 v-if="refund.refund_state===2">退款申请已被拒绝</h3>
                            <h3 v-if="refund.refund_state===3">已同意退款，等待买家退还货物</h3>
                            <h3 v-if="refund.refund_state===4">已同意退款，等待收货</h3>
                            <h3 v-if="refund.refund_state===5">退款成功，货款已退还买家</h3>
                            <ul class="tips">
                                <li>如果您同意，系统将退款给买家</li>
                                <li>如果你拒绝，买家可以修改申请重新提交</li>
                                <li>如果你逾期未处理，系统将自动退款给买家</li>
                            </ul>
                            <div class="op-buttons" v-if="refund.refund_state===1">
                                <template v-if="refund.refund_type===1">
                                    <el-button size="small" class="w200" type="primary" @click="handleProcess(1)" >同意退款</el-button>
                                    <el-button size="small" class="w200" @click="handleProcess(3)">拒绝申请</el-button>
                                </template>
                                <template v-else>
                                    <el-button size="small" class="w200" type="primary" @click="handleProcess(2)">同意退货</el-button>
                                    <el-button size="small" class="w200" @click="handleProcess(3)">拒绝退货申请</el-button>
                                </template>
                            </div>
                            <div class="op-buttons" v-if="refund.refund_state===4">
                                <el-button size="small" class="w200" type="primary" @click="handleProcess(1)">确认收货,同意退款</el-button>
                                <el-button size="small" class="w200" @click="handleProcess(3)">拒绝退款</el-button>
                            </div>
                            <div class="h30"></div>
                            <h3>退款信息</h3>
                            <div class="refund-info-detail">
                                <dl>
                                    <dt>服务类型:</dt>
                                    <dd>{{refund.refund_type_des}}</dd>
                                </dl>
                                <dl>
                                    <dt>退款原因:</dt>
                                    <dd>{{refund.refund_reason}}</dd>
                                </dl>
                                <dl>
                                    <dt>退款金额:</dt>
                                    <dd>{{refund.refund_amount}}</dd>
                                </dl>
                                <dl>
                                    <dt>申请时间:</dt>
                                    <dd>{{refund.created_at}}</dd>
                                </dl>
                                <dl>
                                    <dt>退款编号:</dt>
                                    <dd>{{refund.refund_no}}</dd>
                                </dl>
                                <dl v-if="refund.refund_desc">
                                    <dt>退款说明:</dt>
                                    <dd>{{refund.refund_desc}}</dd>
                                </dl>
                                <dl v-if="refund.images.length > 0">
                                    <dt>相关图片:</dt>
                                    <dd>
                                        <div class="dsxui-uploader-files">
                                            <div class="dsxui-uploader-files-item" v-for="(image, idx) in refund.images" :key="idx">
                                                <a :href="image.image" target="_blank"><img :src="image.thumb" class="img-90 img-fit-cover" alt=""></a>
                                            </div>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="h20"></div>
                    </div>

                    <div class="refund-order">
                        <div class="refund-order-title">订单详情</div>
                        <div class="flex-row item-info">
                            <div class="item-thumb">
                                <img :src="item.thumb" class="img-50" alt="">
                            </div>
                            <div class="flex-fill">
                                <div class="item-title">{{item.title}}</div>
                                <p class="item-sku">{{item.sku_title}}</p>
                            </div>
                        </div>
                        <div class="refund-order-row">
                            <span class="refund-order-row-label">单价</span>
                            <span>:</span>
                            <div class="refund-order-row-value">￥{{item.price}}*{{item.quantity}}</div>
                        </div>
                        <div class="refund-order-row">
                            <span class="refund-order-row-label">运费</span>
                            <span>:</span>
                            <div class="refund-order-row-value">￥{{item.shipping_fee}}</div>
                        </div>
                        <div class="refund-order-row">
                            <span class="refund-order-row-label">优惠金额</span>
                            <span>:</span>
                            <div class="refund-order-row-value">￥{{item.promotion_fee}}</div>
                        </div>
                        <div class="refund-order-row">
                            <span class="refund-order-row-label">商品总价</span>
                            <span>:</span>
                            <div class="refund-order-row-value">￥{{item.total_fee}}</div>
                        </div>
                        <div class="refund-order-row" v-if="refund.order">
                            <span class="refund-order-row-label">买家账号</span>
                            <span>:</span>
                            <div class="refund-order-row-value">￥{{refund.order.buyer_name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </admin-frame>
</template>

<script>
    import AdminFrame from "../common/AdminFrame";

    export default {
        name: "RefundDetail",
        components: {AdminFrame},
        data(){
            return {
                refund:{order:{}},
                refund_id:null,
                item:{}
            }
        },
        mounted() {
            this.refund_id = this.$route.query.refund_id||0;
            this.fetchData();
        },
        methods:{
            fetchData(){
                const refund_id = this.refund_id;
                this.$get('/admin/refund/get',{refund_id}).then(response=>{
                    this.refund = response.data.refund;
                    this.item = this.refund.order_item;
                });
            },
            handleProcess(action_type){
                const refund_id = this.refund_id;
                this.$post('/admin/refund/process',{
                    refund_id,
                    action_type
                }).then(response=>{
                    const refund = response.data.refund;
                    this.refund = {
                        ...this.refund,
                        ...refund
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
